<template>
    <div>
        <h3 class="text-gray-700 text-3xl font-medium">事件查看表</h3>

        <div style="width:100%;margin-top: 20px;margin-bottom: 20px">
            &nbsp;用户：<a-select
                    v-model:value="user"
                    style="width: 200px"
                    ref="select"
                    size="large"
                    :showSearch="true"
            >
                <a-select-option value="">
                    全部
                </a-select-option>
                <a-select-option v-for="student in studentOptions" :value="student.id">
                    {{student.name}}（{{ student.id }}）
                </a-select-option>
            </a-select>

            &nbsp;商家：<a-cascader
                    size="large"
                    change-on-select
                    :options="merchantOptions"
                    v-model:value="merchant"
            >
            </a-cascader>

            <a-button type="primary" @click="onClick" size="large">搜索</a-button>
        </div>

        <log-list :options="logOptions"></log-list>


        <div class="mt-4">
            <h4 class="text-gray-600">Simple Table</h4>

            <div class="mt-6">
                <div class="bg-white shadow rounded-md overflow-hidden my-6">
                    <table class="text-left w-full border-collapse">
                        <thead class="border-b">
                        <tr>
                            <th
                                    class="py-3 px-5 bg-indigo-800 font-medium uppercase text-sm text-gray-100"
                            >
                                City
                            </th>
                            <th
                                    class="py-3 px-5 bg-indigo-800 font-medium uppercase text-sm text-gray-100"
                            >
                                Total orders
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr
                                v-for="(i, index) in simpleTableData"
                                :key="index"
                                class="hover:bg-gray-200"
                        >
                            <td class="py-4 px-6 border-b text-gray-700 text-lg">
                                {{ i.city }}
                            </td>
                            <td class="py-4 px-6 border-b text-gray-500">
                                {{ i.totalOrders }}
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="mt-8">
            <h4 class="text-gray-600">Table with pagination</h4>

            <div class="mt-6">
                <h2 class="text-xl font-semibold text-gray-700 leading-tight">Users</h2>

                <div class="mt-3 flex flex-col sm:flex-row">
                    <div class="flex">
                        <div class="relative">
                            <select
                                    class="appearance-none h-full rounded-l border block appearance-none w-full bg-white border-gray-400 text-gray-700 py-2 px-4 pr-8 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
                            >
                                <option>5</option>
                                <option>10</option>
                                <option>20</option>
                            </select>

                            <div
                                    class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"
                            >
                                <svg
                                        class="fill-current h-4 w-4"
                                        xmlns="http://www.w3.org/2000/svg"
                                        viewBox="0 0 20 20"
                                >
                                    <path
                                            d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
                                    />
                                </svg>
                            </div>
                        </div>

                        <div class="relative">
                            <select
                                    class="appearance-none h-full rounded-r border-t sm:rounded-r-none sm:border-r-0 border-r border-b block appearance-none w-full bg-white border-gray-400 text-gray-700 py-2 px-4 pr-8 leading-tight focus:outline-none focus:border-l focus:border-r focus:bg-white focus:border-gray-500"
                            >
                                <option>All</option>
                                <option>Active</option>
                                <option>Inactive</option>
                            </select>

                            <div
                                    class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"
                            >
                                <svg
                                        class="fill-current h-4 w-4"
                                        xmlns="http://www.w3.org/2000/svg"
                                        viewBox="0 0 20 20"
                                >
                                    <path
                                            d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
                                    />
                                </svg>
                            </div>
                        </div>
                    </div>

                    <div class="block relative mt-2 sm:mt-0">
            <span class="absolute inset-y-0 left-0 flex items-center pl-2">
              <svg
                      viewBox="0 0 24 24"
                      class="h-4 w-4 fill-current text-gray-500"
              >
                <path
                        d="M10 4a6 6 0 100 12 6 6 0 000-12zm-8 6a8 8 0 1114.32 4.906l5.387 5.387a1 1 0 01-1.414 1.414l-5.387-5.387A8 8 0 012 10z"
                />
              </svg>
            </span>

                        <input
                                placeholder="Search"
                                class="appearance-none rounded-r rounded-l sm:rounded-l-none border border-gray-400 border-b block pl-8 pr-6 py-2 w-full bg-white text-sm placeholder-gray-400 text-gray-700 focus:bg-white focus:placeholder-gray-600 focus:text-gray-700 focus:outline-none"
                        />
                    </div>
                </div>

                <div class="-mx-4 sm:-mx-8 px-4 sm:px-8 py-4 overflow-x-auto">
                    <div
                            class="inline-block min-w-full shadow rounded-lg overflow-hidden"
                    >
                        <table class="min-w-full leading-normal">
                            <thead>
                            <tr>
                                <th
                                        class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"
                                >
                                    User
                                </th>
                                <th
                                        class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"
                                >
                                    Role
                                </th>
                                <th
                                        class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"
                                >
                                    Created at
                                </th>
                                <th
                                        class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"
                                >
                                    Status
                                </th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(u, index) in paginatedTableData" :key="index">
                                <td
                                        class="px-5 py-5 border-b border-gray-200 bg-white text-sm"
                                >
                                    <div class="flex items-center">
                                        <div class="flex-shrink-0 w-10 h-10">
                                            <img
                                                    class="w-full h-full rounded-full"
                                                    :src="u.picture"
                                                    alt
                                            />
                                        </div>

                                        <div class="ml-3">
                                            <p class="text-gray-900 whitespace-no-wrap">
                                                {{ u.name }}
                                            </p>
                                        </div>
                                    </div>
                                </td>
                                <td
                                        class="px-5 py-5 border-b border-gray-200 bg-white text-sm"
                                >
                                    <p class="text-gray-900 whitespace-no-wrap">{{ u.role }}</p>
                                </td>
                                <td
                                        class="px-5 py-5 border-b border-gray-200 bg-white text-sm"
                                >
                                    <p class="text-gray-900 whitespace-no-wrap">
                                        {{ u.created }}
                                    </p>
                                </td>
                                <td
                                        class="px-5 py-5 border-b border-gray-200 bg-white text-sm"
                                >
                    <span
                            :class="`relative inline-block px-3 py-1 font-semibold text-${u.statusColor}-900 leading-tight`"
                    >
                      <span
                              aria-hidden
                              :class="`absolute inset-0 bg-${u.statusColor}-200 opacity-50 rounded-full`"
                      ></span>
                      <span class="relative">{{ u.status }}</span>
                    </span>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <div
                                class="px-5 py-5 bg-white border-t flex flex-col xs:flex-row items-center xs:justify-between"
                        >
              <span class="text-xs xs:text-sm text-gray-900"
              >Showing 1 to 4 of 50 Entries</span
              >

                            <div class="inline-flex mt-2 xs:mt-0">
                                <button
                                        class="text-sm bg-gray-300 hover:bg-gray-400 text-gray-800 font-semibold py-2 px-4 rounded-l"
                                >
                                    Prev
                                </button>
                                <button
                                        class="text-sm bg-gray-300 hover:bg-gray-400 text-gray-800 font-semibold py-2 px-4 rounded-r"
                                >
                                    Next
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="mt-8">
            <h4 class="text-gray-600">Wide Table</h4>

            <div class="flex flex-col mt-6">
                <div
                        class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8"
                >
                    <div
                            class="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200"
                    >
                        <table class="min-w-full">
                            <thead>
                            <tr>
                                <th
                                        class="px-6 py-3 border-b border-gray-200 bg-gray-100 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
                                >
                                    Name
                                </th>
                                <th
                                        class="px-6 py-3 border-b border-gray-200 bg-gray-100 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
                                >
                                    Title
                                </th>
                                <th
                                        class="px-6 py-3 border-b border-gray-200 bg-gray-100 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
                                >
                                    Status
                                </th>
                                <th
                                        class="px-6 py-3 border-b border-gray-200 bg-gray-100 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
                                >
                                    Role
                                </th>
                                <th
                                        class="px-6 py-3 border-b border-gray-200 bg-gray-100"
                                ></th>
                            </tr>
                            </thead>

                            <tbody class="bg-white">
                            <tr v-for="(u, index) in wideTableData" :key="index">
                                <td
                                        class="px-6 py-4 whitespace-no-wrap border-b border-gray-200"
                                >
                                    <div class="flex items-center">
                                        <div class="flex-shrink-0 h-10 w-10">
                                            <img
                                                    class="h-10 w-10 rounded-full"
                                                    src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
                                                    alt
                                            />
                                        </div>

                                        <div class="ml-4">
                                            <div
                                                    class="text-sm leading-5 font-medium text-gray-900"
                                            >
                                                {{ u.name }}
                                            </div>
                                            <div class="text-sm leading-5 text-gray-500">
                                                {{ u.email }}
                                            </div>
                                        </div>
                                    </div>
                                </td>

                                <td
                                        class="px-6 py-4 whitespace-no-wrap border-b border-gray-200"
                                >
                                    <div class="text-sm leading-5 text-gray-900">
                                        {{ u.title }}
                                    </div>
                                    <div class="text-sm leading-5 text-gray-500">
                                        {{ u.title2 }}
                                    </div>
                                </td>

                                <td
                                        class="px-6 py-4 whitespace-no-wrap border-b border-gray-200"
                                >
                    <span
                            class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
                    >{{ u.status }}</span
                    >
                                </td>

                                <td
                                        class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500"
                                >
                                    {{ u.role }}
                                </td>

                                <td
                                        class="px-6 py-4 whitespace-no-wrap text-right border-b border-gray-200 text-sm leading-5 font-medium"
                                >
                                    <a href="#" class="text-indigo-600 hover:text-indigo-900"
                                    >Edit</a
                                    >
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import {defineComponent, reactive, ref} from "vue";



    import {useTableData} from "@/hooks/useTableData";
    import {getMerchantList} from "@/api/Merchant";
    import {getStudentList} from "@/api/Student";
    import {getLog} from "@/api/Log/GetLog";

    export default defineComponent({
        setup() {
            const merchant = ref(['','','']);
            const user  = ref('');
            const studentOptions = getStudentList();
            const merchantOptions = getMerchantList();
            const logOptions = ref(getLog());

            const onClick= ()=>{
                logOptions.value.push({
                    userId: '111',
                    role: '111',
                    action: '111',
                    actionType: '111',
                    result: '111',
                    comment: '111',
                    ip: '111',
                });
                console.log(logOptions);
            };

            merchantOptions.splice(0,0,{
                value: '',
                label: '全部'
            });
            const {
                simpleTableData,
                paginatedTableData,
                wideTableData,
            } = useTableData();

            return {
                simpleTableData,
                paginatedTableData,
                wideTableData,
                merchant,
                user,
                merchantOptions,
                studentOptions,
                logOptions,
                onClick
            };
        },
    });
</script>
